{% extends 'base.html' %}
{% block head %}
    <script type="text/javascript" src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.11.0/codemirror.js"></script>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.11.0/codemirror.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.11.0/mode/sql/sql.js"></script>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.11.0/theme/abcdef.css">
    {% block css %}
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename = 'css/style.css') }}">
    {% endblock %}
{% endblock %}
{% block content %}
    <div class="container">
        SQLflow
        <a href="/">Home</a>&nbsp; | &nbsp;<a href="{{ url_for('sql') }}">sql</a>&nbsp; | &nbsp;<a
            href="{{ url_for('script') }}">script</a>
    </div>
    <div class="main">
        <h1 class="h1">SQLflow</h1>
        <h5>去执行一下<a href="{{ url_for('script') }}">script</a>页面生成临时表A, 然后在此页面<a href="{{ url_for('sql') }}">sql</a>查询:
            select * from A</h5>
        <h6>【注】Table or view not found: 去执行一下<a href="{{ url_for('script') }}">script</a>页面生成临时表A</h6>
    </div>
    <textarea id="flask-codemirror-source_code" name="source_code" style="text-align: left;"></textarea>
    <div class="main">
        <input type="submit" value="执行" id="submit"
               style="width: 60px;height:36px;background: #0093fe;color: #fff;font-size: 0.9em;border: none;outline: 0;border-radius: 4px;">
        <div id='data'></div>
    </div>
    <script>
        var editor_for_source_code = CodeMirror.fromTextArea(
            document.getElementById('flask-codemirror-source_code'),
            {
                "lineNumbers": "true",
                "mode": "sql",
                "theme": "abcdef"
            }
        );
        $(function () {
            $("#submit").click(function () {
                var searchText = editor_for_source_code.getValue();
                $.ajax({
                    url: '/runsql?' + "data=" + searchText,
                    dataType: "json",
                    type: 'get',
                    async: true,
                    cache: false,
                    success: function (data) {
                        $('#data').append(data)
                    }
                })
            })
        });
    </script>
{% endblock %}